<template>
  <div>
    <div style="margin:5px 15px;font-size:14px;">订单详情</div>
    <div class='cart-list-box' v-for="(item,index) in gift_card.give_coupons" :key="index">
      <van-row>
        <van-col span="8"><span style="padding-left:15px;">{{item.name}}</span></van-col>
        <van-col span="8" style="text-align:center;">￥{{item.price/100}}</van-col>
        <van-col span="8" style="text-align:right;"><span style="padding-right:15px;">X{{item.num}}</span></van-col>
      </van-row>
    </div>
    <div class='cell'>
      <van-row>
        <van-col span="12"><span style="padding-left:15px;">共{{sum_num}}件商品</span></van-col>
        <van-col span="12" style="text-align:right;"><span style="padding-right:15px;">共计：￥{{sum_price/100}}</span></van-col>
      </van-row>
    </div>
    <div class='cell'>
      <van-row>
        <van-col span="12"><span style="padding-left:15px;">领取码</span></van-col>
        <van-col span="12" style="text-align:right;"><text selectable="true" style="padding-right:15px;">{{gift_card.receive_code}}</text><span class="copy" v-if="gift_card.status == 'success'" @click="copyText">复制</span></van-col>
      </van-row>
    </div>
    <div class='cell' v-if="gift_card.status == 'received'&&gift_card.receive_user_name!=''">
      <van-row>
        <van-col span="12"><span style="padding-left:15px;">领取人</span></van-col>
        <van-col span="12" style="text-align:right;"><span style="padding-right:15px;">{{gift_card.receive_user_name}}</span></van-col>
      </van-row>
    </div>
    <button v-if="gift_card.status == 'success'" class="give-btn" open-type="share">立即赠送</button>
    <button v-if="gift_card.status == 'received'" class="btn">已领取</button>
    <button v-if="gift_card.status == 'refund'" class="btn">已退款</button>
  </div>
</template>

<script>
import api from '@/utils/api'
import {
  mapState,
  mapActions,
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      gift_card:{},
      sum_num:0,
      sum_price:0.00,
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    copyText(){
      let self = this
      wx.setClipboardData({
        data: this.gift_card.receive_code,
        success (res) {
          wx.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    }
  },
  onShareAppMessage: function(options) {
    let data = {
      title: '你有一个礼品卡可领取哦',
      imageUrl: this.gift_card.background_pic,
      desc: '你有一个礼品卡可领取哦',
      path: '/pages/user/gift_card/gift_card_get?gift_card_id='+this.gift_card.id
    }
    console.log('data: ', data)
    return data
  },
  async onLoad (options) {
    this.sum_num = 0
    this.sum_price = 0
    let id = options.gift_card_id
    let result = await api.getGiftCard({id:id})
    if(result.code == 0){
      result.data.give_coupons.forEach(item=>{
        this.sum_num += item.num
        this.sum_price += item.num * item.price
      })
      this.sum_price = this.sum_price.toFixed(2)
      this.gift_card = result.data
    }
  }
}
</script>

<style>
page{
  background: #F2F2F2;
}
.cart-list-box{
  width: 100%;
  height: 60px;
  line-height: 60px;
  background:#FFFFFF;
  font-size:16px;
  border-top:1px #E3E3E3 solid;
}
.cell{
  width: 100%;
  height: 40px;
  line-height:40px;
  background:#FFFFFF;
  font-size:16px;
  border-top:1px #E3E3E3 solid;
}
.give-btn{
  width: 80%;
  height: 40px;
  margin: 20px auto;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background: red;
  color: white;
  border-radius: 5px;
}
.copy{
  background: red;
  padding: 3px 8px;
  border-radius: 5px;
  margin-right: 8px;
  font-size: 14px;
  color: #FFFFFF;
}
.btn{
  width: 80%;
  height: 40px;
  margin: 20px auto;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background: #AAAAAA;
  color: white;
  border-radius: 5px;
}
</style>